<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="../vue2.js"></script>
</head>
<body>
<div id="box">
    {{ myName.substring(0,1).toUpperCase() + myName.substring(1) }}   <!-- html中js逻辑复杂，导致过重 -->

    <!-- 使用vue中的计算属性 -->
    {{ myComputedName }}

</div>
<script>
    new Vue({
        el: "#box",
        data:{
            myName: 'heosfa',
        },
        // 计算属性（防止模板过重，难以维护），负责逻辑放到这里面来写
        // 计算属性有缓存，相同的调用只执行一次；而方法每调用一次就执行一次；使用方法会造成性能损耗
        computed:{
            myComputedName(){
                return this.myName.substring(0,1).toUpperCase() + this.myName.substring(1);    //必须要有return值
            }
        }
    })
</script>
</body>
</html>